<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background: black;
			}
			#box {
				width: 200px;
				height: 200px;
				perspective: 60000px;
				perspective-origin:-100px 10000px ;
				margin: 300px auto;
				transform-style: preserve-3d;
				animation: run 10s infinite linear;
			}
			#box>div{
				position: absolute;
				width: 200px;
				height:200px;
				background: deeppink;
				line-height: 200px;
				color: #fff;
				font-size: 50px;
				text-align: center;
				line-height: 100px;
				/*border-radius: 50%;*/
				border: 5px solid deeppink;
				opacity: .9;
			}
			#box>div img{
				width: 100%;
				height: 100%;
				/*border-radius: 50%;*/
			}
			
			.item1 {
				transform: rotatey(0deg) translatez(400px);
			}
			
			.item2{
				transform: rotatey(30deg) translatez(400px);
			}
			.item3{
				transform: rotatey(60deg) translatez(400px);
			}
			.item4{
				transform: rotatey(90deg) translatez(400px);
			}
			.item5{
				transform: rotatey(120deg) translatez(400px);
			}
			.item6{
				transform: rotatey(150deg) translatez(400px);
			}
			.item7{
				transform: rotatey(180deg) translatez(400px);
			}
			.item8{
				transform: rotatey(210deg) translatez(400px);
			}
			.item9{
				transform: rotatey(240deg) translatez(400px);
			}
			.item10{
				transform: rotatey(270deg) translatez(400px);
			}
			.item11{
				transform: rotatey(300deg) translatez(400px);
			}
			.item12{
				transform: rotatey(330deg) translatez(400px);
			}
			.item14{
				height: 500px !important;
				transform: rotatey(0deg) translatey(-200px); 
				border-radius: 50%;
			}
			
			
			@keyframes run {
				from {
					transform: rotate3d(0,1,1,0deg);
				}
				to {
					transform-origin: center center;
					transform: rotate3d(0,1,1,360deg);
				}
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div class="item1 a" >
				<img src="./img/1.jpg" />
			</div>
			<div class="item2 a">
				<img src="./img/2.jpg" />
			</div>
			<div class="item3 a">
				<img src="./img/3.jpg" />
			</div>
			<div class="item4 a">
				<img src="./img/4.jpg" />
			</div>
			<div class="item5 a">
				<img src="./img/5.jpg" />
			</div>
			<div class="item6 a">
				<img src="./img/6.jpg" />
			</div>
			<div class="item7 a">
				<img src="./img/7.jpg" />
			</div>
			<div class="item8 a">
				<img src="./img/8.jpg" />
			</div>
			<div class="item9 a">
				<img src="./img/9.jpg" />
			</div>
			<div class="item10 a">
				<img src="./img/10.jpg" />
			</div>
			<div class="item11 a">
				<img src="./img/11.jpg" />
			</div>
			<div class="item12 a">
				<img src="./img/12.jpg" />
			</div>
			<div class="item14 a">
				<br />雅洁儿  瑶瑶儿 小可爱
			</div>
			
		</div>
		
		<script type="text/javascript">
			   var item=document.getElementsByClassName('a');
			   var dushu=10;
			 function f(){
			 	for(var i=0; i<item.length; i++){
			   	  item[i].style.transform='rotatey('+dushu+'deg)'+'&nbsp translatez(400px)';
			   	 dushu=dushu+30;
//			   	 alert(dushu);
			    }
			 }  
			   setInterval(f,1000);
		</script>
	</body>

</html>